<nc-component v-bind:data="data[index]" class="component-title" v-bind:style="{ backgroundColor : nc.backgroundColor }">

    <!-- 预览 -->
    <template slot="preview">
        <div class="hui-wrap">
            <div class="hui-center-title"><h1>媒体列表</h1></div>
            <div class="hui-media-list">
                <ul>
                    <li>
                        <a href="javascript:hui.toast('hi...');">
                            <div class="hui-media-list-img"><img src="__STATIC__/img/diy_view/diy_preview.png" /></div>
                            <div class="hui-media-content">
                                <h1>标题内容....</h1>
                                <p>power by hcoder.net</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:hui.toast('hi...');">
                            <div class="hui-media-list-img"><img src="__STATIC__/img/diy_view/diy_preview.png" /></div>
                            <div class="hui-media-content">
                                <h1>标题内容....</h1>
                                <p>power by hcoder.net</p>
                            </div>
                        </a>
                    </li>

                </ul>
            </div>
        </div>
    </template>

    <!-- 编辑 -->
    <template slot="edit">

        <div class="layui-form-item">
            <label class="layui-form-label sm">文本名</label>
            <div class="layui-input-block">
                <input type="text" v-model="nc.title" v-bind:id="'title_'+index" placeholder="请输入文本" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label sm">副文本</label>
            <div class="layui-input-block">
                <input type="text" v-model="nc.subTitle" v-bind:id="'subTitle_'+index" placeholder="请输入副文本" class="layui-input">
            </div>
        </div>

        <font-size v-bind:data="{ value : nc.fontSize }"></font-size>

        <text-align></text-align>

        <color v-bind:data="{ field : 'backgroundColor', 'label' : '背景颜色' }"></color>

        <nc-link v-bind:data="{ field : nc.link }"></nc-link>

    </template>



    <!-- 验证 -->
    <template slot="verify">
        function verify(){
        var res = { code : true, message : "" };
        if(vue.data[{{index}}].title.length == 0){
        res.code = false;
        res.message = "文本不能为空";
        setTimeout(function(){
        $("#title_" + {{index}}).focus();
        },10);
        }
        return res;
        }
    </template>

</nc-component>